<template>
  <div>
    <div class="ks-row-middle mb20 lh1">
      <span style="width: 100px">窗口名</span>
      <el-select
        v-model="modelId"
        style="width: 400px"
        filterable
        @change="changeModal"
      >
        <el-option
          v-for="modal in modalList"
          :key="modal.key"
          :value="modal.key"
          :label="modal.name"
        />
      </el-select>
    </div>
    <template v-if="modelId" >
      <div class="ks-row-middle mb25 lh1">
        唯一标识： {{ modelId }}
      </div>
      <el-divider>高级设置</el-divider>
      <div v-if="block.type === 'open_modal'">
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">标题设置</span>
          <el-switch v-model="showTitle" @change="changeModalTitle" />
        </div>
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">打开回调</span>
          <el-switch v-model="showOpen" @change="changeModalOpen" />
        </div>
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">关闭回调</span>
          <el-switch v-model="showClose" @change="changeModalClose" />
        </div>
      </div>
      <div v-else-if="block.type === 'close_modal'">
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">参数设置</span>
          <el-switch v-model="showCloseParam" @change="changeModalCloseParam" />
        </div>
      </div>
    </template>
  </div>
</template>

<script>

import {getAllModalList} from '../../../utils/component'
export default {
  name: 'ModalSelect',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: { },
  computed: {
    modelId: {
      get() {
        const blockModelId = this.block?.getFieldValue('Modal')
        return blockModelId === 'noData' ?  '' : blockModelId
      },
      set(val) {
        this.block.setFieldValue(val, 'Modal')
        if(this.block.type !=='open_modal') return
        this.block.updateShape_()
      }
    },
    modalTitle: {
      get() {
        const count = this.block?.titleCount_
        this.showTitle = count ? true : false
        return count ? true : false
      },
      set(val) {
        this.block.titleCount_ = val ? 1 : 0
        this.block.updateShape_()
      }
    },
    modalOpen: {
      get() {
        const count = this.block?.openCount_
        this.showOpen = count ? true : false
        return count ? true : false
      },
      set(val) {
        this.block.openCount_ = val ? 1 : 0
        this.block.updateShape_()
      }
    },
    modalClose: {
      get() {
        const count = this.block?.closeCount_
        this.showClose = count ? true : false
        return count ? true : false
      },
      set(val) {
        this.block.closeCount_ = val ? 1 : 0
        this.block.updateShape_()
      }
    },
    modalCloseParam: {
      get() {
        const count = this.block?.paramCount_
        this.showCloseParam = count ? true : false
        return count ? true : false
      },
      set(val) {
        this.block.paramCount_ = val ? 1 : 0
        if(this.block.type !=='close_modal') return
        this.block.updateShape_()
      }
    }
  },
  data () {
    return {
      formData: {},
      modalList: [],
      showTitle: false,
      showOpen: false,
      showClose: false,
      showCloseParam: '' // 关闭modal是否传递参数
    }
  },
  watch: {
    'block': {
      handler() {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData() {
      this.modalList = getAllModalList() || []
      if (!this.modalList.length) return
      const blockModelId = this.block?.getFieldValue('Modal')
      if (blockModelId) {
        this.modelId = blockModelId
      }
      if(this.block.type === 'close_modal'){
        const paramCount = this.block.paramCount_
        this.showCloseParam = !!paramCount
        this.modalCloseParam = !!paramCount
      }
      if(this.block.type !=='open_modal') return
      const titleCount = this.block?.titleCount_
      this.showTitle = !!titleCount
      this.modalTitle = !!titleCount

      const openCount = this.block?.openCount_
      this.showOpen = !!openCount
      this.modalOpen = !!openCount

      const closeCount = this.block?.closeCount_
      this.showClose = !!closeCount
      this.modalClose = !!closeCount

    },
    changeModalTitle(val){
      this.modalTitle = val
    },
    changeModalOpen(val){
      this.modalOpen = val
    },
    changeModalClose(val){
      this.modalClose = val
    },
    changeModalCloseParam(val){
      this.modalCloseParam = val
    },
    changeModal(val) {
    }
  }
}
</script>

<style scoped>

</style>
